<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <button @click="getinf">{{ name }}</button>
    <div>计算属性==={{ Allprice }}</div>
    <!-- 浅监听 -->
    浅监听<input type="text" v-model="value" />{{ value }}<br />
    <!-- 深度监听 -->
    深度监听 <input type="text" v-model="obj.name" />{{ obj.name }}
    <hr />
    <vNav msg="msg" :name="name" @getgift="getgift" />
  </div>
</template>

<script lang="tsx">
import { Component, Vue, Watch } from "vue-property-decorator";

//通过装饰器调用vue的 Component @Component({})的内置方法和属性
//类的装饰器
@Component({
  components: {
    //注册的组件
    vNav: () => import("./nav.vue"),
  },
  filters: {},
})
export default class Home extends Vue {
  name: String;
  value: string;
  obj: object;
  constructor() {
    super();
    this.name = "诸葛钢铁";
    this.value = "";
    this.obj = {
      name: "",
    };
  }
  //事件
  getinf(): void {
    console.log("我是一个方法");
  }
  //计算属性
  get Allprice(): number {
    return 200;
  }
  mounted() {
    console.log("挂载");
  }
  //方法装器
  //getvalue(){} 随意起
  // 浅监听
  @Watch("value")
  getvalue(newVal: string, oldVal: string) {
    console.log(newVal, "newVal");
    console.log(oldVal, "oldVal");
  }
  //深度监听
  @Watch("obj", { deep: true })
  getobj(newVal: object) {
    console.log(newVal, "newVal");
  }

  //接收子组件的数据
  getgift(e: any) {
    console.log(e, "接收子组件的数据");
  }
}
</script>

<style lang="" scoped></style>
